<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <link rel="stylesheet" href="/css/style0.css">
        <script src="/lib/layui/layui.js" charset="utf-8"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            .layui-btn-primary {
                border: 0px solid #C9C9C9;
                background-color: #fff;
                color: #555;
            }
            .layui-card-body{
                text-align: center;
            }
            .layui-card-body span{
                line-height: 30px;
            }
        </style>
    </head>
    <body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                <div class="layui-card-header">统计图一</div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body ">
                                <div id="main" style="width: 100%;height:320px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">统计图二</div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body ">
                                <div id="main1" style="width: 100%;height:320px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

       </div>
    </div>
    </body>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>

        layui.use(['laydate','form','layer'],function() {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                value: new Date(1534766888000)
            });
        })



        var ve = new Vue({
            el: '#divvuehtml',//绑定vue渲染范围
            data: {
                menuItems: {},//初始化菜单资源list
            },
            created: function () {//vue在打开html前初始化创建函数
                this.inin();  //初始化菜单效果
                this.inin2();  //初始化菜单效果
                //this.ininOrder(2);  //初始化菜单效果
                //this.ininSale(2);  //初始化菜单效果
            },
            mounted: function () {//初始化html完成后在进行操作

            },
            methods: {//调用函数
                inin :function (){
                    var myChart = echarts.init(document.getElementById('main'));
                    option = {
                        title: {
                            text: 'Stacked Area Chart'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Email',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: 'Union Ads',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: 'Video Ads',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name: 'Direct',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: 'Search Engine',
                                type: 'line',
                                stack: 'Total',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                inin2 :function (){
                    var myChart = echarts.init(document.getElementById('main1'));
                    option = {
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                                type: 'line',
                                areaStyle: {}
                            }
                        ]
                    };
                    myChart.setOption(option);

                }
            }
        })
    </script>

</html>
